// 高级搜索组件slot所需自定义特殊组件
export default {
  install: (Vue, options) => {
    Vue.component("el-price-range", {
      props: {
        name: {
          type: String
        },
        value: {
          type: Array
        }
      },
      data() {
        return {
          priceStart: "",
          priceEnd: ""
        };
      },
      watch: {
        value(newValue) {
          this.priceStart = newValue[0];
          this.priceEnd = newValue[1];
        }
      },
      methods: {
        formatPrice(type) {
          this[type] = this[type].replace(/[^\d]/g, "");
          if (this[type][0] === "0") {
            this[type] = 0;
          }
        },
        handleChange() {
          let priceStart = this.priceStart;
          let priceEnd = this.priceEnd;
          if (priceStart && priceEnd) {
            priceStart > priceEnd &&
              ([this.priceStart, this.priceEnd] = [priceEnd, priceStart]);
          }
          this.$emit("input", [this.priceStart, this.priceEnd]);
        }
      },
      template: `
          <div class="ccui-price-range">
            <el-input
                maxlength="8"
                @input="formatPrice('priceStart')"
                @change="handleChange"
                placeholder="请输入价格区间"
                clearable
                style="width:45%"
                v-model="priceStart">
            </el-input>
            <span>-</span>
            <el-input
                maxlength="8"
                @input="formatPrice('priceEnd')"
                @change="handleChange"
                placeholder="请输入价格区间"
                clearable
                style="width:45%"
                v-model="priceEnd">
            </el-input>
          </div>
      `
    });
  }
};
